<template>
	<view>
		<view class="tipic-box" v-for="(item,i) in topicList">
			<view class="title">
				{{item.title}}
			</view>
			<view class="content">
				{{item.content}}
			</view>
			<view class="bottom">
				<image :src="item.touxiang" mode=""></image>
				<text>{{item.pls}}观点</text>
				<view class="hot" v-show="item.isHot">
					hot
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TopicItem",
		data() {
			return {
				topicList: []
			};
		},
		methods:{
			getData() {
				uniCloud.callFunction({
					name: "getTopic",
					success: (e) => {
						this.topicList = e.result.data;
						console.log("获取topic成功");
					},
					fail: (e) => {
						console.log("获取topic失败", e);
					}
				})
			}
		},
		created() {
			this.getData()
		}
	}
</script>

<style>
	.title {
		border-left: 20rpx #F5433F solid;
		padding-left: 20rpx;
		font-size: 40rpx;
	}

	.content {
		padding: 30rpx 0;
	}

	.tipic-box {
		margin-bottom: 60rpx;
		padding: 20rpx;
		border-bottom: 2rpx #ccc solid;
	}

	.hot {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 26rpx;
		color: #F5433F;
		border: #F5433F 4rpx solid;
		border-radius: 10rpx;
	}

	.bottom {
		display: flex;
		align-items: center;
		gap: 26rpx;
	}

	.bottom image {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}
</style>